<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>bg</title>
		<link rel="stylesheet" type="text/css" href="../css/normalize.css" />
		<link rel="stylesheet" type="text/css" href="../css/base.css" />
		<script src="../../libs/avalon/avalon.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			fieldset,nav {
				margin: 10px;
			}
			.row {
				margin: 10px;
			}
			.col {
				width: 25%;
				float: left;
				padding: 10px;
				text-align: center;
			}
		</style>
	</head>

	<body>
		<nav ms-controller="nav">
			<div class="container">
			    <a ms-attr-href="#{{el}}" ms-repeat="nav">{{el}}</a>
			</div>
		</nav>
		<fieldset ms-controller="bg">
			<legend ms-attr-id="{{title}}">{{title}}</legend>
			<div class="container">
				<div class="row clearfix" ms-repeat="bgColors">
					<div class="col" ms-css-background-color="$val[0]" ms-css-color="$val[3]">{{$val[0]}}</div>
					<div class="col" ms-css-background-color="$val[1]" ms-css-color="$val[3]">{{$val[1]}}</div>
					<div class="col" ms-css-background-color="$val[2]" ms-css-color="'#fff'">{{$val[2]}}</div>
					<div class="col" ms-css-background-color="$val[3]" ms-css-color="'#fff'">{{$val[3]}}</div>
				</div>
			</div>
			<hr />
			<div class="container">
				<div class="row clearfix" ms-repeat="bgColors">
					<div class="col" ms-class="bg-{{$key}}-lighter">bg-{{$key}}-lighter</div>
					<div class="col" ms-class="bg-{{$key}}-light">bg-{{$key}}-light</div>
					<div class="col" ms-class="bg-{{$key}}">bg-{{$key}}</div>
					<div class="col" ms-class="bg-{{$key}}-weight">bg-{{$key}}-weight</div>
				</div>
			</div>
			<hr />
			<div class="container">
				<textarea name="" rows="10" style="width: 100%;" ms-attr-value="css()"></textarea>
			</div>
		</fieldset>
	</body>
	<script type="text/javascript">
	var vmNav = avalon.define({
	    $id: 'nav',
	    nav: ['background']
	})
		var vmBg = avalon.define({
			$id: 'bg',
			title: 'background',
			bgColors: {
				blue: ["#eff", "#9cf", "#0ae", "#39c"],
				green: ["#efd", "#cfc", "#3c6", "#393"],
				red: ["#fee", "#fcc", "#f33", "#c33"],
				yellow: ["#ffd", "#ffc", "#f90", "#f60"],
				purple: ["#fef", "#ccf", "#90c", "#909"],
				gray: ["#eee", "#ddd", "#999", "#666"]
			},
			css: function() {
				var code = [];
				code.push("/**\n * background\n */");
				// bg
				avalon.each(vmBg.bgColors, function(key, val) {
					code.push(".bg-" + key + "{background-color: " + val[2] + "; color: #fff}");
				})
				code.push("")
					// bg lighter
				avalon.each(vmBg.bgColors, function(key, val) {
					code.push(".bg-" + key + "-lighter{background-color: " + val[0] + "; color: " + val[3] + "}");
				})
				code.push("")
					// bg light
				avalon.each(vmBg.bgColors, function(key, val) {
					code.push(".bg-" + key + "-light{background-color: " + val[1] + "; color: " + val[3] + "}");
				})
				code.push("")
					// bg lighter
				avalon.each(vmBg.bgColors, function(key, val) {
					code.push(".bg-" + key + "-weight{background-color: " + val[3] + "; color: #fff}");
				})
				return code.join("\n");
			}
		})
	</script>

</html>